<template>
  <section ref="city" id="select-city" class="pf fadeInDown" v-if="$store.state.show">
    <!--默认为state.show为false,通过Home.vue页面的showCityList mutations中的方法触发-->
    <header class="city-header mint-1px-b pr">
      <span class="fb">选择城市</span>
      <span class="close-city pa" @click="cancelCityList">×</span><!--关闭按钮-->
    </header>
    <div ref="city" @click="selectCity">
      <!--mt-index-section 与右侧导航中的索引一一对应，mt-index-section 的 index 属性即为与其对应的索引的显示文本。
      mt-index-section 标签内可为任意自定义内容。
      当手指在右侧导航中滑动时，会在列表中间显示一个目前索引值的提示符。
      若不需要提示符，只需将 show-indicator 设为 false-->
      <mt-index-list><!--使用mint-ui框架中的Index List，索引列表，可由右侧索引导航快速定位到相应的内容。-->
        <mt-index-section :index="city.sort" v-for="(city,index) in cityList" :key="index">
          <mt-cell :title="name.regionName" v-for="name in city.data" :key="name.id"></mt-cell>
        </mt-index-section>
      </mt-index-list>
    </div>
  </section>
</template>

<script>
  import {mapActions, mapMutations} from 'vuex'

  export default {
    data() {
      return {
        showCityList: true,
        cityList: []
      }
    },
    methods: {
      ...mapActions([
        'updateCityAsync'
      ]),
      ...mapMutations([
        'pushLoadStack',
        'completeLoad'
      ]),
      requestData(url, fn) {
        this.pushLoadStack()
        // this.$http.get(url).then(fn).then(this.completeLoad)
        this.$axios.get(url).then(fn).then(this.completeLoad)
      },
      changeCityData(data) {//本组件的核心方法
        this.pushLoadStack()
        this.$refs.city.className = "pf fadeOutTop"
        this.$store.dispatch('updateCityAsync', data).then(this.completeLoad)
      },
      matchCityStr(str) {//通过selectCity方法传递的城市名，获取相应的rN值，最后返回给changeCityData传递的city对象里面
        let randomList = ['bj', 'sh', 'gz']
        let randomCity = randomList[Math.floor(3 * Math.random())]
        switch (str) {
          case '北京':
            return 'bj'
          case '上海':
            return 'sh'
          case '广州':
            return 'gz'
          default:
            return randomCity
        }
      },
      selectCity(event) {//通过事件代理和点击的当前对象的className判断究竟是哪一个对象，从而获取对象中的文本值
        let ele = event.target
        let className = ele.className
        let name = ''
        if (className === "mint-indexsection-index" || className === "mint-indexlist-nav" || className === "mint-indexlist-navitem") {
          name = ''
        } else if (className === 'mint-cell-wrapper') {
          name = ele.children[0].children[0].innerHTML
        } else if (className === "mint-cell-title") {
          name = ele.children[0].innerHTML
        } else {
          name = ele.innerHTML
        }
        if (name) {
          this.changeCityData({
            city: {
              name: name,
              rN: this.matchCityStr(name)
            }
          })
        } else {
          return false
        }
      },
      cancelCityList() {
        this.changeCityData({city: {}})
      }
    },
    created() {
      this.$store.dispatch('updateCityAsync', {city: {}})
      this.requestData('/movie/city', (response) => {
        // let data = JSON.parse(response.data)
        let data = response.data
        console.log(data)
        let cityObj = data.data.returnValue
        console.log(cityObj)
        let citySort = Object.keys(cityObj)
        console.log(citySort)
        this.cityList.push({
          sort: '热门',
          data: [{
            regionName: '北京',
            id: 1,
            rN: 'bj'
          }, {
            regionName: '上海',
            id: 2,
            rN: 'sh'
          }, {
            regionName: '广州',
            id: 3,
            rN: 'gz'
          }]
        })
        citySort.forEach((item) => {
          this.cityList.push({
            sort: item,
            data: cityObj[item]
          })
        })
        console.log(this.cityList)
      })
    }
  }
</script>

<style>
  .mint-indicator-wrapper {
    z-index: 1000
  }

  #select-city {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    background-color: #fff;
  }

  .city-header {
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #000;
    font-size: 16px;
    background-color: #fff;
  }

  .close-city {
    font-size: 28px;
    color: #666;
    display: inline-block;
    height: 46px;
    width: 50px;
    line-height: 38px;
    text-align: center;
    right: 0px;
  }

  @-webkit-keyframes fadeInDown {
    0% {
      opacity: .7;
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px)
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: .7;
      -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
      transform: translateY(-50px)
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0)
    }
  }

  .fadeInDown {
    -webkit-animation: fadeInDown .3s;
    animation: fadeInDown .3s;
  }

  @-webkit-keyframes fadeOutTop {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0)
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px)
    }
  }

  @keyframes fadeOutTop {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0)
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
      transform: translateY(-50px)
    }
  }

  .fadeOutTop {
    -webkit-animation: fadeOutTop .35s;
    animation: fadeOutTop .35s;
  }
</style>
